<template>

				<div class="top-nav">
					<div class="flex-row wrapper">
						<div class="flex-col-3">
							<h1 class="top-nav-logo"><img src="@/assets/img/IMG_2020.png" style="width: 167px; height: 60px"></h1>
						</div>
						<div class="flex-col-16">
							<ul class="top-nav-center flex-row">
								<li class="flex-col-4" v-if="target === 1"><h2 class="font-big"><router-link to="/index" @click="toTarget(1)">首页</router-link></h2></li>
								<li class="flex-col-4" v-else><h2><router-link to="/index" ref="simulation" @click="toTarget(1)">首页</router-link></h2></li>

								<li class="flex-col-4" v-if="target === 2"><h2 class="font-big"><router-link to="/UltraAce" @click="toTarget(2)">商城</router-link></h2></li>
								<li class="flex-col-4" v-else><h2><router-link to="/UltraAce" @click="toTarget(2)">商城</router-link></h2></li>

								<li class="flex-col-4" v-if="target === 3"><h2 class="font-big"><router-link to="/Ultraman" @click="toTarget(3)">购物车</router-link></h2></li>
								<li class="flex-col-4" v-else><h2><router-link to="/Ultraman" @click="toTarget(3)">购物车</router-link></h2></li>

								<li class="flex-col-4" v-if="target === 4"><h2 class="font-big"><router-link to="/Ultramantaro" @click="toTarget(4)">评论吧</router-link></h2></li>
								<li class="flex-col-4" v-else><h2><router-link to="/Ultramantaro" @click="toTarget(4)">评论吧</router-link></h2></li>

								<li class="flex-col-4" v-if="target === 5"><h2 class="font-big"><router-link to="/" v-if="userstatus === 1" @click="toTarget(5)">后台管理</router-link></h2></li>
								<li class="flex-col-4" v-else><h2><router-link to="/admin" v-if="userstatus === 1" @click="toTarget(5)">后台管理</router-link></h2></li>
								<li class="flex-col-4"></li>
							</ul>
						</div>
						<div class="flex-col-5">
							<ul class="top-nav-right flex-row">
								<li class="flex-col-6 box1">
									<router-link to="/" v-if="username"><i class="iconfont icon-wode"></i></router-link>
									<router-link to="/login" @click="toTarget(0)" v-else><i class="iconfont icon-wode"></i></router-link>
                  <router-link to="/" v-if="username">{{ username }}</router-link>
									<router-link to="/login" @click="toTarget(0)" v-else>登录</router-link>
								</li>
								<li class="flex-col-6 box1">
                  <router-link to="/Ultramanleo" v-if="username" @click="toTarget(0)"><i class="iconfont icon-bofangjilu"></i></router-link>
                  <i v-else @click="notLogin();" class="iconfont icon-bofangjilu"></i>
                  <router-link to="/Ultramanleo" v-if="username" @click="toTarget(0)"><a>订单</a></router-link>
                  <a v-else @click="notLogin();">订单</a>
								</li>
								<li class="flex-col-6 box1">
									<i class="iconfont icon-xiaoxizhongxin"></i>
									<a href="#">消息</a>
								</li>
								<li class="flex-col-6 box1">
									<i @click="logout();toTarget(0)" class="iconfont icon-bangzhu" v-if="username"></i>
									<i class="iconfont icon-bangzhu" v-else></i>
                  <router-link to="/login" @click="logout();toTarget(0)" v-if="username">退出</router-link>
									<a v-else>帮助</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
	</template>
<script>
  import request from "@/utils/request.js";
  import {ElMessage} from "element-plus";

  export default {
    data(){
      return{
        username: '',
        userstatus: '',
        target: 0,

      }
    },
    created() {
      this.member()
    },
    watch:{
      username(newVal, oldVal){
        // console.log("newVal=", newVal);
        // console.log("oldVal=", oldVal);
        if (newVal != oldVal){
          this.member();
          // this.$forceUpdate();
        }
      }
    },
    methods: {
      toTarget(num){
        this.target = num;
        this.member();
      },
      member(){
        request.post("/api/userStatus").then(
            res => {
              // console.log("res=", res);
              if (res.data){
                this.username = res.data.username;
                this.userstatus = res.data.status;
              }
            }
        )
      },
      logout(){
       if (this.username){
         request.post("/api/logout",{
           params: {
             username: this.username
           }
         }).then(
             res => {
               // console.log("res=", res);
               if (res.code === "200") {
                 ElMessage({
                   message: res.msg,
                   type: 'success',
                 })
                 this.member();
                 location.reload();
               }
             }
         )
       }
      },
      notLogin() {
        if (!this.username) {
          ElMessage({
            message: '请先登录',
            type: 'warning',
          })
        }
      },
    }
  }
</script>

<style>
	.top-nav{
		min-height: 40px;
		max-height: 80px;
		font-size: 12px;
		background-color: #313132;
		color: white;
		padding-top: 8px;
	}
	.top-nav .top-nav-center a{
		color:#c1c1c1;
		margin-left: -25px;
		margin-top: 10px;
	}
	.top-nav .top-nav-center li{
		text-align: center;
		margin-top: 10px;
	}
	.top-nav .top-nav-center a:hover{
		font-size: 25px;
		color:#ede7de;
	}
	.top-nav .top-nav-center .font-big{
		font-size: 25px;
		cursor: pointer;
		/* margin-left: 15px; */
		color:#ede7de;
	}
	.top-nav .top-nav-right .box1{
		text-align: center;
	}
	.top-nav .top-nav-right .box1 a{
		color: #d6d6d6;
	}
	.top-nav .top-nav-right i{
		color:white;
		font-size: 42px;
		display: block;
		cursor: pointer;
	}
	.top-nav .top-nav-right i:hover{
		font-size: 48px;
		color: #ebe6dc;
	}
</style>